<script lang="ts" setup>
import { ref } from 'vue'
import SelectTree from './components/SelectTree.vue'
import EmployeeService from '@/api/employee'
import ImageUpload from './components/ImageUpload.vue'
import { useRouter } from 'vue-router'

const userInfo = ref({
  username: '', // 用户名
  mobile: '', // 手机号
  workNumber: '', // 工号
  formOfEmployment: null, // 聘用形式
  departmentId: null, // 部门id
  timeOfEntry: '', // 入职时间
  correctionTime: '', // 转正时间
  staffPhoto: '' // 员工头像
} as any)
const userForm = ref()
const rules = {
  username: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    {
      min: 1,
      max: 6,
      message: '姓名为1-6位'
    }
  ],
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      //   pattern 正则表达式
      pattern: /^1[3-9]\d{9}$/,
      message: '手机号格式不正确',
      trigger: 'blur'
    }
  ],
  formOfEmployment: [{ required: true, message: '请选择聘用形式', trigger: 'blur' }],
  departmentId: [{ required: true, message: '请选择部门', trigger: 'blur' }],
  timeOfEntry: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],
  correctionTime: [
    { required: true, message: '请选择转正时间', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (userInfo.value.timeOfEntry) {
          if (new Date(userInfo.value.timeOfEntry) > new Date(value)) {
            callback(new Error('转正时间不能小于入职时间'))
            return
          }
        }
        callback()
      }
    }
  ]
}

const router = useRouter()
// 如何获取路由参数的id?
console.log(router.currentRoute.value)
const getEmployeeDetail = async (id: any) => {
  // 逻辑与运算，前者条件满足才执行后者
  if (id) {
    var res: any = await EmployeeService.getEmployeeDetailService(id)
    userInfo.value = res
  }
}
getEmployeeDetail(router.currentRoute.value.params.id)

const saveData = async () => {
  await userForm.value.validate()
  if (router.currentRoute.value.params.id) {
    // 编辑模式
    await EmployeeService.updateEmployeeService(userInfo.value)
    ElMessage.success('更新员工成功')
  } else {
    // 新增模式
    await EmployeeService.addEmployeeService(userInfo.value)
    ElMessage.success('新增员工成功')
  }
  router.push('/employee')
}
</script>

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="edit-form">
        <el-form ref="userForm" :model="userInfo" :rules="rules" label-width="220px">
          <!-- 姓名 部门 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="username">
                <el-input size="small" v-model="userInfo.username" class="inputW" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 工号 入职时间 -->
          <!-- 工号系统生成，需要禁用 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="工号" prop="workNumber">
                <el-input size="small" v-model="userInfo.workNumber" class="inputW" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <!--手机 聘用形式  -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机" prop="mobile">
                <el-input
                  size="small"
                  v-model="userInfo.mobile"
                  class="inputW"
                  :disabled="!!router.currentRoute.value.params.id"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门" prop="departmentId">
                <!-- 放置及联部门组件 -->
                <!-- inputW样式会给selecttree中 template第一层组件 -->
                <SelectTree v-model="userInfo.departmentId" class="inputW"></SelectTree>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="聘用形式" prop="formOfEmployment">
                <el-select size="small" v-model="userInfo.formOfEmployment" class="inputW">
                  <el-option label="正式" :value="1" />
                  <el-option label="非正式" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入职时间" prop="timeOfEntry">
                <el-date-picker
                  size="small"
                  type="date"
                  value-format="yyyy-MM-dd"
                  class="inputW"
                  v-model="userInfo.timeOfEntry"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="转正时间" prop="correctionTime">
                <el-date-picker
                  size="small"
                  v-model="userInfo.correctionTime"
                  type="date"
                  class="inputW"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 员工照片 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工头像">
                <!-- 放置上传图片 -->
                <ImageUpload v-model="userInfo.staffPhoto"></ImageUpload>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 保存个人信息 -->
          <el-row type="flex">
            <el-col :span="12" style="margin-left: 220px">
              <el-button size="small" @click="saveData" type="primary">保存更新</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.edit-form {
  background: #fff;
  padding: 20px;
  .inputW {
    width: 380px;
  }
}
</style>
